feat: Enhance Course Optimizer Page with Previous Run Links and Improved UI #2356

pganesh-apphelix · 2025-08-07T07:26:22Z

Description

This PR introduces multiple UI enhancements and new functionality for the Course Optimizer page. The key updates include:

Previous Run Link Section

New section added to display links from previous course runs.
This section is conditionally rendered based on a feature flag:
contentstore.enable_course_optimizer_check_prev_run_links
- ✅ Enabled: Displays the section.
- ❌ Disabled: Section is hidden.
If enabled but no data is found, the section will display “No result found.”

Course Update, Handouts, and Custom Page Section

Added UI components to display links for:
- Course Updates
- Handouts
- Custom Pages
These links will appear under both:
- Broken Links section
- Previous Run Links section

UI Enhancements

Updated UI for the following elements:
- Scan Course button
- Filter Links components
Applied consistent styling based on the new design specifications.

after-course-optimizer-enhancement-2025-08-08.mp4

Jira

Testing Instructions

Please verify the following:

🔘 With the feature flag disabled, the Previous Run Link section does not appear.
✅ With the feature flag enabled:
- If no previous run link is available, the section displays “No result found.”
- All relevant Course Update, Handouts, and Custom Page links should be visible in both the Broken Links and Previous Run Links sections.

codecov · 2025-08-08T05:04:03Z

Codecov Report

❌ Patch coverage is 97.64706% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 94.50%. Comparing base (7825bcd) to head (1dbf10e).

Files with missing lines	Patch %	Lines
src/optimizer-page/scan-results/ScanResults.tsx	97.05%	4 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##           master    #2356    +/-   ##
========================================
  Coverage   94.50%   94.50%            
========================================
  Files        1171     1171            
  Lines       25149    25272   +123     
  Branches     5374     5568   +194     
========================================
+ Hits        23766    23884   +118     
+ Misses       1320     1319     -1     
- Partials       63       69     +6

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Faraz32123 · 2025-08-12T06:15:14Z

src/optimizer-page/scan-results/PreviousRunLinkTable.tsx

+const PreviousRunLinkHref: FC<{ href: string }> = ({ href }) => {
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    window.open(href, '_blank');
+  };
+
+  return (
+    <div className="broken-link-container">
+      <a href={href} onClick={handleClick} className="broken-link" rel="noreferrer">
+        {href}
+      </a>
+    </div>
+  );
+};
+
+const GoToBlock: FC<{ block: { url: string, displayName: string } }> = ({ block }) => {
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    window.open(block.url, '_blank');
+  };
+
+  return (
+    <div className="go-to-block-link-container">
+      <a href={block.url} onClick={handleClick} className="broken-link" rel="noreferrer">
+        {block.displayName}
+      </a>
+    </div>
+  );
+};


why adding these functions again,
Can we import these from brokenLinkTable?

Done, refactored the functions accordingly.

Faraz32123 · 2025-08-12T06:16:31Z

src/optimizer-page/scan-results/PreviousRunLinkTable.tsx

+    <Card className="unit-card rounded-sm pt-2 pb-3 pl-3 pr-4 mb-2.5">
+      <p className="unit-header">{unit.displayName}</p>
+      <DataTable
+        data={previousRunLinkList}
+        itemCount={previousRunLinkList.length}
+        columns={[
+          {
+            accessor: 'Links',
+            width: 'col-12',
+          },
+        ]}
+      />
+    </Card>


this part is also same, can we add changes to same file BrokenLinkTable?

Yes, refactored the same.

Faraz32123 · 2025-08-12T06:16:47Z

src/optimizer-page/scan-results/PreviousRunSectionCollapsible.tsx

+  const collapsibleTitle = (
+    <div className={className}>
+      <div className="section-collapsible-header-item">
+        <Icon src={isOpen ? ArrowDropDown : ArrowRight} />
+        <p className="section-title">{title}</p>
+      </div>
+      <div className="section-collapsible-header-actions">
+        <div className="section-collapsible-header-action-item">
+          <p>{previousRunLinksCount > 0 ? previousRunLinksCount : '-'}</p>
+        </div>
+      </div>
+    </div>
+  );


Can we use SectionCollapsible?? As only function arguments and collapsibleTitle is changing in both with same return value including a lot of duplications.

We can edit SectionCollapsible based on a flag i think instead of creating a new component.

Done, It is updated as per the suggestion.

Faraz32123 · 2025-08-12T06:16:55Z

src/optimizer-page/scan-results/ScanResults.tsx

+  const virtualSections = useMemo(() => {
+    const createVirtualSection = (


Can we use some different name? Virtual isn't making any sense, what do you think?

It is updated with meaningful variable name.

Faraz32123 · 2025-08-12T06:17:04Z

src/optimizer-page/scan-results/ScanResults.tsx

+    // eslint-disable-next-line max-len
+    () => allSectionsForPrevRun.some(section => section.subsections.some(subsection => subsection.units.some(unit => unit.blocks.some(block => block.previousRunLinks && block.previousRunLinks.length > 0)))),


can we format this line instead of adding // eslint-disable-next-line max-len

Done, It's updated.

Faraz32123 · 2025-08-12T06:17:11Z

src/optimizer-page/scan-results/ScanResults.tsx

+    // eslint-disable-next-line max-len
+    const hasVisibleUnit = section.subsections.some((subsection) => subsection.units.some((unit) => unit.blocks.some((block) => {


same here. can we remove // eslint-disable-next-line max-len

Done, It's updated.

Faraz32123 · 2025-08-15T12:07:23Z

src/optimizer-page/CourseOptimizerPage.tsx

-                  subtitle={intl.formatMessage(messages.headingSubtitle)}
-                />
-                <Card>
+                <div className="d-flex flex-wrap justify-content-between align-items-center mb-3 px-3 py-3">


instead of adding px-3 py-3, can we add p-3?

Done, It's updated.

Faraz32123 · 2025-08-15T12:07:39Z

src/optimizer-page/CourseOptimizerPage.tsx

+                    size="md"
+                    className="px-4 rounded-0 scan-course-btn"
+                    onClick={() => dispatch(startLinkCheck(courseId))}
+                    disabled={(!!linkCheckInProgress) && !errorMessage}


can we use linkCheckInProgress instead of !!linkCheckInProgress as it's a boolean field.

We need !! because linkCheckInProgress can be null, but disabled only accepts true or false. !! makes sure it’s a valid boolean and also needed for type check.

Faraz32123 · 2025-08-15T12:08:01Z

src/optimizer-page/CourseOptimizerPage.tsx

+                          animation="border"
+                          size="sm"
+                          className="mr-2"
+                          style={{ width: '1rem', height: '1rem' }}


can we move this to scss file?

Done, It's updated.

Faraz32123 · 2025-08-15T12:08:37Z

src/optimizer-page/CourseOptimizerPage.tsx

+                </div>
+                <Card style={{ boxShadow: 'none', backgroundColor: 'transparent' }}>
+                  <p className="px-3 py-1 small">{intl.formatMessage(messages.description)}</p>
+                  <hr style={{ margin: '0 20px' }} />


same here & everywhere else,
can we move this to scss file?

Done, It's updated.

Faraz32123 · 2025-08-15T12:09:40Z

src/optimizer-page/scan-results/BrokenLinkTable.tsx

+      if (linkType === 'previous') {
+        // Handle previous run links (no filtering, no icons)
+        if (block.previousRunLinks && block.previousRunLinks.length > 0) {
+          const blockPreviousRunLinks = block.previousRunLinks.map((link) => ({
+            Links: (
+              <LinksCol
+                block={{ url: block.url, displayName: block.displayName || 'Go to block' }}
+                href={link}
+                showIcon={false}
+              />
+            ),
+          }));
+          acc.push(...blockPreviousRunLinks);
+        }
+      } else {
+        // Handle broken links with filtering and icons
+        if (!filters) { return acc; }


conditions in else block are same and in start we have just added early return which neglects/ignores || (!filters.brokenLinks && !filters.externalForbiddenLinks && !filters.lockedLinks) in below if blocks.

I think we should remove else and just add if block for previousRunLinks and keep the other if blocks same. This will also reduce no.of lines git diff, which helps in reviewing faster.

if (linkType === 'previous') { // Handle previous run links (no filtering, no icons) if (block.previousRunLinks && block.previousRunLinks.length > 0) { const blockPreviousRunLinks = block.previousRunLinks.map((link) => ({ Links: ( <LinksCol block={{ url: block.url, displayName: block.displayName || 'Go to block' }} href={link} showIcon={false} /> ), })); acc.push(...blockPreviousRunLinks); } }

Done, It's removed

Faraz32123 · 2025-08-15T12:10:09Z

src/optimizer-page/scan-results/ScanResults.tsx

  useEffect(() => {
-    setOpenStates(data?.sections ? data.sections.map(() => false) : []);
-  }, [data?.sections]);
-  if (!data?.sections) {
-    return <InfoCard text={intl.formatMessage(messages.noBrokenLinksCard)} />;
-  }
+    setOpenStates(allSectionsForBrokenLinks ? allSectionsForBrokenLinks.map(() => false) : []);
+    setPrevRunOpenStates(allSectionsForPrevRun ? allSectionsForPrevRun.map(() => false) : []);
+  }, [allSectionsForBrokenLinks, allSectionsForPrevRun]);

-  const { sections } = data;
+  if (!data) {
+    return <InfoCard text={intl.formatMessage(messages.noDataCard)} />;
+  }


I think we should avoid refactoring previous code completely resulting in unwanted edge-case issues.
Cause data would still contain empty arrays, So incase even if we have empty arrays, !data would always be false? Correct me if I am wrong!

It is updated.

Faraz32123 · 2025-08-18T12:53:37Z

src/optimizer-page/scan-results/ScanResults.tsx

+  // Combine renderable sections with regular sections
+  const allSectionsForBrokenLinks = useMemo(
+    () => [...renderableSections, ...(sections || [])],
+    [renderableSections, sections],
+  );
+
+  const allSectionsForPrevRun = useMemo(
+    () => [...renderableSections, ...(sections || [])],
+    [renderableSections, sections],
+  );


can we improve this? both seems same to me.

Faraz32123 · 2025-08-18T12:53:41Z

src/optimizer-page/scan-results/ScanResults.tsx

+  // Calculate previous run links count for each section (including virtual sections)
+  const previousRunLinksCounts = useMemo(() => {


virtual sections?

pganesh-apphelix force-pushed the pganesh/TNL2-141 branch from 36e5e52 to 33fa7c8 Compare August 7, 2025 16:21

pganesh-apphelix requested review from Faraz32123 and papphelix August 11, 2025 07:05

Faraz32123 reviewed Aug 12, 2025

View reviewed changes

pganesh-apphelix force-pushed the pganesh/TNL2-141 branch from d88d14c to 2b44e8f Compare August 12, 2025 13:03

Faraz32123 reviewed Aug 15, 2025

View reviewed changes

pganesh-apphelix force-pushed the pganesh/TNL2-141 branch 2 times, most recently from e4b049d to 24befc9 Compare August 18, 2025 11:18

Faraz32123 reviewed Aug 18, 2025

View reviewed changes

pganesh-apphelix added 3 commits August 19, 2025 08:06

feat: enhance course optimizer page design in studio

4956724

fix: refactor test cases and code

6cfb617

fix: eliminate redundant function calls

1dbf10e

pganesh-apphelix force-pushed the pganesh/TNL2-141 branch from 24befc9 to 1dbf10e Compare August 19, 2025 08:07

		const virtualSections = useMemo(() => {
		const createVirtualSection = (

		// eslint-disable-next-line max-len
		() => allSectionsForPrevRun.some(section => section.subsections.some(subsection => subsection.units.some(unit => unit.blocks.some(block => block.previousRunLinks && block.previousRunLinks.length > 0)))),

		// eslint-disable-next-line max-len
		const hasVisibleUnit = section.subsections.some((subsection) => subsection.units.some((unit) => unit.blocks.some((block) => {

		// Calculate previous run links count for each section (including virtual sections)
		const previousRunLinksCounts = useMemo(() => {

feat: Enhance Course Optimizer Page with Previous Run Links and Improved UI #2356

Are you sure you want to change the base?

feat: Enhance Course Optimizer Page with Previous Run Links and Improved UI #2356

Conversation

pganesh-apphelix commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Previous Run Link Section

Course Update, Handouts, and Custom Page Section

UI Enhancements

Jira

Testing Instructions

Uh oh!

codecov bot commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pganesh-apphelix Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Faraz32123 Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pganesh-apphelix commented Aug 7, 2025 •

edited

Loading

codecov bot commented Aug 8, 2025 •

edited

Loading

pganesh-apphelix Aug 18, 2025 •

edited

Loading

Faraz32123 Aug 15, 2025 •

edited

Loading